<template>
  <view class="list">
    <view class="page-container">
      <!-- 骨架屏 -->
      <view v-if="listLoad && !serviceList.length">
        <u-skeleton
          class="skeleton-item"
          loading
          rows="3"
          :title="false"
          v-for="(item, index) in Array(3)"
          :key="index"
        />
      </view>
      <view v-else>
        <block v-if="serviceList.length">
          <view
            class="list-item"
            v-for="(item, index) in serviceList"
            :key="index"
            @click="toDetail(item)"
          >
            <image :src="item.image" mode="aspectFill" />
            <view class="right">
              <view class="title">
                {{ item.storeName }}
              </view>
              <view class="operate flex flex-between flex-middle">
                <view class="price flex flex-middle">
                  {{ item.price }}
                  <text> 元/起 </text>
                </view>
                <view class="flex flex-middle">
                  查看
                  <u-icon size="12" color="#37756D" name="arrow-right" />
                </view>
              </view>
            </view>
          </view>
        </block>

        <block v-else>
          <image
            src="@/static/image/common/default.png"
            mode="widthFix"
            class="default-png"
          />
        </block>
      </view>

      <u-loadmore
        :status="status"
        :nomoreText="serviceList.length ? '没有更多了' : '暂时没有服务'"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      default: "nomore",
    },
    listLoad: {
      type: Boolean,
      default: false,
    },
    serviceList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    toDetail(item) {
      this.$navigateTo(`/pages/service/detail?id=${item.id}`);
    },
  },
};
</script>

<style scoped lang="scss">
.default-png {
  width: 200px;
  margin: 80px auto 36px;
  display: block;
}

.list {
  padding-left: 106px;
  padding-right: 16px;

  .skeleton-item {
    padding: 10px 0;
  }

  &-item {
    padding: 10px 0;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;

    .title {
      margin: 2px 0 6px;
      height: 40px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .operate {
      color: #37756d;

      .price {
        color: #d02500;
        font-size: 18px;

        text {
          color: #282828;
          font-size: 12px;
          margin-left: 2px;
        }
      }
    }

    image {
      float: left;
      width: 72px;
      height: 72px;
      border-radius: 6px;
      margin-right: 6px;
    }
  }
}
</style>